/* 
目标： 使用Context来跨组价通信，让App组件-直接传数据给SonSon组件
  1. 优点: React自带, 不需要下载额外的包就能实现跨组件通信
  2. 缺点: 增加组件嵌套结构, 调试困难
*/
import React, { Component } from 'react';

const { Provider, Consumer } = React.createContext();
const { Provider: Provider2, Consumer: Consumer2 } = React.createContext();

export default class App extends Component {
  render() {
    return (
      <div>
        <Provider value={[1, 2, 3]}>
          <h1>父组件</h1>
          <Son></Son>
        </Provider>
      </div>
    );
  }
}

class Son extends Component {
  render() {
    return (
      <div>
        <h2> 儿子</h2>
        <Provider2 value={{ age: 19, gender: 1 }}>
          <SonSon></SonSon>
        </Provider2>
      </div>
    );
  }
}

class SonSon extends Component {
  render() {
    return (
      <div>
        <Consumer>
          {(value) => {
            console.log('value  ----->  ', value);
            return <h1>{value}</h1>;
          }}
        </Consumer>
        <h2> 孙子</h2>
        <SonSonSon></SonSonSon>
      </div>
    );
  }
}

class SonSonSon extends React.Component {
  render() {
    return (
      <div>
        孙子的儿子
        <Consumer2>
          {(value) => {
            console.log('value  ----->  ', value);
          }}
        </Consumer2>
      </div>
    );
  }
}
